<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>调度计划</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <script src="/style/public/publicStyle.js"></script>


</head>

<body>
<div class="weadmin-nav">
			<span class="layui-breadcrumb" style="visibility: visible;">
			<a href="">任务管理</a><span lay-separator="">/</span>
			<a>
				<cite>调度计划</cite></a>
			</span>

</div>
<div class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline" style="top: 7px;">
            <label class="layui-form-label">日期范围</label>
            <div class="layui-inline" id="laydate">
                <div class="layui-input-inline">
                    <input type="text" autocomplete="off" id="startDate" class="layui-input" placeholder="开始日期">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                    <input type="text" autocomplete="off" id="endDate" class="layui-input" placeholder="结束日期">
                </div>
            </div>
        </div>
        <button type="button" class="layui-btn layui-btn-radius" id="seachW">本周</button>
        <button type="button" class="layui-btn layui-btn-radius" id="seachM">本月</button>
        <button type="button" class="layui-btn layui-btn-radius" id="seachD">当天</button>
        <button type="button" class="layui-btn layui-btn-radius" id="seach">查询</button>
    </div>
</div>
<!--表格-->
<div class="weadmin-body">
    <div style="height: 600px;" id="mian">

    </div>
</div>


</body>
<script>
    function getDayTime(type, ymd, num) {
        debugger
        var str;
        var year;
        var month;
        var day;
        var date = new Date();
        if (ymd == 'year') {
            year = date.getFullYear() - num;
        }else{
            year = date.getFullYear();
        }

        if (ymd == 'month') {
            month = date.getMonth() + 1 - num;
        }else{
            month = date.getMonth() + 1
        }
        if (ymd == 'day') {
            day = date.getDate() - num;
        }else{
            day = date.getDate()
        }


        if (month < 10) {
            month = '0' + month;
        }
        if (day < 10) {
            day = '0' + day;
        }
        if (type == 'end') {
            str = year + '-' + month + '-' + day + ' 23:59:59'
        } else {
            str = year + '-' + month + '-' + day + ' 00:00:00'
        }
        return str
    }


    document.getElementById("startDate").value = getDayTime('start', 'day', 0);
    document.getElementById("endDate").value = getDayTime('end', 'day', 0);

    layui.use(['util', 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function () {
        getData();
        $("#seach").click(function () {
            getData();
        });
        $("#seachD").click(function () {
            document.getElementById("startDate").value = getDayTime('start', 'day', 0);
            document.getElementById("endDate").value = getDayTime('end', 'day', 0);
            getData();
        });
        $("#seachW").click(function () {
            document.getElementById("startDate").value = getDayTime('start', 'day', 7);
            document.getElementById("endDate").value = getDayTime('end', 'day', 0);
            getData();
        });
        $("#seachM").click(function () {
            document.getElementById("startDate").value = getDayTime('start', 'month', 1);
            document.getElementById("endDate").value = getDayTime('end', 'month', 0);
            getData();
        });

        function getData() {
            $.ajax({
                url: '/jobplan/getChart',
                type: 'get',
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                data: {
                    'startDate': document.getElementById("startDate").value,
                    'endDate': document.getElementById("endDate").value
                },
                success: function (msg) {
                    if (msg.code == "200") {
                        lineCharts(msg.count);
                    } else {
                        alert(500)

                    }

                }
            })
        }


        var laydate = layui.laydate;
        //日期范围
        laydate.render({
            elem: '#laydate'
            , type: 'datetime'
            , range: ['#startDate', '#endDate']
        });

        function lineCharts(data) {
            var lineChart = echarts.init(document.getElementById('mian'));
            var option = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: data.legend,
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: data.xAxis,
                yAxis: {
                    type: 'value'
                },
                color: ['#F39C12', '#00A65A', '#c23632', '#20f314'],
                series: data.series
            };
            lineChart.setOption(option);
        }


    })
</script>

</html>